<template>
  <div id="payMoney">
    <el-row>
      <el-col :span="24">
        <div class="div_order">
          <div>
            <i class="fa fa-check-circle" style="color:#7abd54" aria-hidden="true"></i>
            <span class="span_orderTitle">订单已于</span>
            <span class="span_time">{{OrderForm.create_date}}</span>
            <span class="span_orderTitle">提交成功，请您尽快付款！</span>
            <span class="span_title">订单号：</span>
            <span class="span_title">{{OrderForm.id}}</span>
          </div>
          <div>
            <span class="span_title">应付金额：</span>
            <span class="span_money">{{'￥' + OrderForm.money + '.00'}}</span>
            <span class="span_title">元</span>
          </div>
          <div>
            <!-- <span class="span_account_title">购买账号:</span>
                        <span class="span_account_num">{{OrderForm.tel}}</span> -->
          </div>
          <div>
            <span class="span_account_title">请您在提交订单后</span>
            <span class="span_alert_time">15分钟</span>
            <span class="span_account_title">内完成支付，否则订单会自动取消。</span>
          </div>
        </div>
        <div class="div_radio">
          <el-radio-group v-model="payMethod">
            <el-radio class="radio" :label="2">
              <img src="../../../static/img/payMoney/WXPAY.png">
            </el-radio>
            <el-radio class="radio" :label="3">
              <img src="../../../static/img/payMoney/alipay.jpg">
            </el-radio>
          </el-radio-group>
        </div>
        <el-row>
          <el-col :span="5" class="div_button">
            <el-button type="danger" class="div_button" @click="goPayMoney()">支付</el-button>
            <el-button type="text" class="div_button" @click="noPayMoney()">取消支付</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog title="支付" :visible.sync="dialogVisible" :close-on-click-modal="false" size="tiny">
      <p>请在新打开的网银页面进行支付，支付完成前不要关闭该窗口哦</p>
      <p style="text-align:center;margin-top:10px;">
        <el-button type="success" @click="CompletePayment()">已完成支付</el-button>
        <el-button type="warning" @click="Reselect()">重新选择支付方式</el-button>
      </p>
    </el-dialog>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'

  export default {
    props: ['orderInfo'],//传订单id
    data () {
      return {
        OrderForm: {
          create_date: '',
          number: '',
          tel: '',
          money: '',
        },
        returnData: {
          type: '',
          package_id: '',
          order_id: '',
        },
        payMethod: '',
        dialogVisible: false,
      }
    },
    methods: {
      getInfo () {
        let _this = this
        let pramas = new Object()
        pramas.id = this.orderInfo.bookId
        postDataToServer(this.orderInfo.key, pramas).then((data) => {
          if (data.status === 0) {
            this.OrderForm = data.data_list.packageorderinfo_title
          } else {
            this.$message({
              type: 'warning',
              message: data.message
            })
          }

        })
      },
      goPayMoney () {
        if (this.payMethod === '') {
          this.$message({
            type: 'warning',
            message: '请选择支付方式!	'
          })
        } else {
          this.dialogVisible = true
        }
      },
      Reselect () {
        this.dialogVisible = false,
          this.payMethod = ''
      },
      CompletePayment () {
        this.dialogVisible = false,
          // this.returnData.package_id = this.OrderForm.package_id;
          // this.returnData.order_id = this.orderInfo.bookId;
          this.returnData.type = true
        // this.$emit("returnOrder",this.returnData);
        this.$emit('returnOrder', true)
      },
      noPayMoney () {
        this.$confirm('确认关闭？关闭后自动跳转到订单列表').then(_ => {
          this.returnData.type = false
          this.$emit('returnOrder', this.returnData)
        }).catch(_ => {
          this.$message('取消成功')
        })
      }
    },
    created () {
      this.getInfo()
    }
  }
</script>

<style scoped>
  .div_order {
    border-top: 2px solid #7abd54;
    background: #f3fded;
    padding: 1.2em 2em 40px 2em;
  }

  .div_order div {
    height: 40px;
    line-height: 40px;
  }

  .span_orderTitle {
    color: #7abd65;
    font-weight: bold;
  }

  .span_time {
    color: #D03737;
    font-weight: bold;
  }

  .span_title {
    color: #707070;
  }

  .span_money {
    color: #D03737;
  }

  .span_account_title {
    color: #999;
    font-size: 12px;
  }

  .span_account_num {
    color: #2490d3;
    font-weight: bold;
    font-size: 24px;
  }

  .span_alert_time {
    color: #fea700;
  }

  .div_radio {
    margin: 20px;
  }

  .div_button {
    float: right;
    width: 30%;
    margin-top: 10px;
    margin-right: 20px;
  }
</style>
